<!--
 * @Date: 2023-04-04 15:51:55
 * @LastEditTime: 2023-05-10 10:41:32
-->
<template>
  <div class="addProject">
    <a-modal
      :visible="visible"
      :title="modalTitleMap[modalType]"
      :maskClosable="false"
      :footer="null"
      :destroyOnClose="true"
      :afterClose="onClose"
      @cancel="onClose"
    >
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="项目名称" v-if="routerName !== 'translate'">
          <a-input
            v-model="form.project_name"
            placeholder="请输入项目名称"
            @pressEnter="submit"
            v-preventReClick="1000"
          />
        </a-form-model-item>
        <a-form-model-item label="项目语言">
          <a-button @click="selectLang">选择语言</a-button>
          <a-button @click="langSort" type="link" v-if="checkedArr.length > 2">语言排序</a-button>
          <div class="list">
            <Tag
              v-for="item in checkedArr"
              :tag="item"
              :key="item.value"
              :labelName="{ label: 'language_name' }"
              :isDefault="item.language_id === defaultLanguage.language_id"
              @closeTag="closeTag"
              @selectTag="setDefaultLanguage"
            />
          </div>
        </a-form-model-item>

        <div class="btn_box">
          <a-button @click="submit" :loading="loading">{{ modalType ? '确认修改' : '提交' }}</a-button>
        </div>
      </a-form-model>
    </a-modal>

    <Language ref="languageRef" @change="(e) => (checkedArr = e)" :checkedArr="checkedArr" />
    <Sort ref="sortRef" @change="(e) => (checkedArr = e)" />
  </div>
</template>

<script>
import { newProject, updateProject } from '@/api/project'
import Language from '../translate/language.vue'
import { Sort, Tag } from '@/components'

export default {
  name: 'NewProject',

  components: { Language, Sort, Tag },

  props: { routerName: { type: String, default: () => '' } },

  data () {
    return {
      visible: false,
      loading: false,
      sortLangVisble: false,
      modalType: 0,
      modalTitleMap: { 0: '新增项目', 1: '编辑项目' },
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      form: { project_name: '', language_id: '', language: [] },
      checkedArr: [],
      defaultLanguage: {}
    }
  },

  mounted () {},

  watch: {
    checkedArr: { handler: 'languageListListener' },
    defaultLanguage: { handler: 'defaultLanguageListener' }
  },

  methods: {
    // 弹窗开启
    open () {
      this.visible = true
    },
    // 语言排序
    langSort () {
      this.$refs.sortRef.visible = true
      this.$refs.sortRef.sortArr = this.checkedArr
    },
    // 设置默认语言
    setDefaultLanguage (e) {
      this.defaultLanguage = e.tag ?? e
    },
    // 监听默认语言对象
    defaultLanguageListener (e) {
      this.form.language_id = e.language_id
    },
    // 删除标签
    closeTag ({ e, tag }) {
      // 判断是否默认语言
      if (tag.language_id === this.form.language_id) {
        this.defaultLanguage = {}
        this.form.language_id = ''
      }

      const checkedArr = this.checkedArr.filter((item) => {
        return item.language_id !== tag.language_id
      })
      const formLang = this.form.language.filter((item) => item !== tag.language_id)
      this.$set(this, 'checkedArr', checkedArr)
      this.$set(this.form, 'language', formLang)
    },
    // 打开选择语言抽屉
    selectLang () {
      this.$refs.languageRef.open()
    },
    // 监听语言抽屉回调的数组
    languageListListener (e) {
      this.form.language.length = 0
      e.forEach((item) => this.form.language.push(item.language_id))
      if (e.length) this.setDefaultLanguage(e[0])
    },
    // 关闭弹窗回调
    onClose () {
      this.visible = false
      this.$refs.languageRef.visible = false

      this.form = { project_name: '', language_id: '', language: [] }
      this.checkedArr = []
      this.defaultLanguage = {}
      this.modalType = 0
      this.$emit('close')
    },
    // 新增项目提交
    submit () {
      this.loading = true
      this.modalType ? this.updateProject() : this.newProject()
    },
    updateProject (isShowMsg = true) {
      updateProject(this.form)
        .then((res) => {
          const parmas = { ...this.form, type: 'update' }
          if (res.code === 200) {
            if (isShowMsg) this.$message.success(res.msg)
            this.$emit('success', parmas)
            this.onClose()
          } else this.$message.error(res.msg)
        })
        .finally(() => {
          this.loading = false
        })
    },
    newProject (isShowMsg = true) {
      newProject(this.form)
        .then((res) => {
          if (res.code === 200) {
            if (isShowMsg) this.$message.success(res.msg)
            this.$emit('success', { ...res.data, type: 'new' })
            this.onClose()
          } else this.$message.error(res.msg)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.btn_box {
  display: flex;
  align-items: center;
  justify-content: center;

  .ant-btn {
    width: 88px;
  }
}
</style>
